<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>叩丁狼互联网商户平台</title>
    <#include "/common/link.ftl"/>
    <link rel="stylesheet" href="/css/index_css.css">
</head>
<body>
<div class="nav">
    <div class="nav-div">
        <div class="row justify-content-between">
            <div class="col-md-4 border-right" style="padding: 0px;">
                <h4>叩丁狼互联网汽车服务平台</h4>
                <h5 style="color:#434343;font-size: 18px">连锁运营顾问 / 高级服务专家</h5>
            </div>
            <div class="col-md-3 category" style="padding-left: 30px">
                <button class="btn btn-primary-cus">
                    <a href="/messageBoard/list">留言板</a>
                </button>
            </div>
            <div class="col-md-1" style="text-align: center;padding: 20px;">
                <button class="btn btn-primary-full" type="button" id="btn-appointment">
                    马上预约
                </button>

            </div>
            <div class="col-md-4 tel" style="padding: 15px;">
                <h2 style="vertical-align:middle;"><i class="fa fa-phone"></i></h2>
                <h5 style="color:#434343; ">全国免费热线:</h5>
                <h2>020-85628002</h2>
            </div>
        </div>
    </div>

</div>
<div class="body">
    <div class="banner">
        <img src="/img/system/banner.png"/>
    </div>
</div>
<div class="footer">
    <div class="row">
        <div class="col-sm-4">
            <div class="position-relative p-3 bg-white " style="height: 200px">
                <blockquote><strong>店铺信息</strong></blockquote>
                <small style="line-height:30px">BUSINESS INFORMATION</small>
                <p class="text-muted">
                    ${business.intro}
                </p>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="position-relative p-3 bg-white " style="height: 200px">
                <blockquote><strong>服务与支持</strong></blockquote>
                <small style="line-height:30px">SERVICE AND SUPPORT</small>
                <p class="text-muted">
                    “店面营建”板块主要介绍在投资加盟者建店过程中，车仆提供的具体支持服务。从市场调研、店面选址、规划指导、店面设计、装修指导，车仆运营部的团队成员们将全程服务！我们将为各位投资者指引如何成功打造一家汽车美容店的具体流程。我们的用心，您感受得到！</p>
            </div>
        </div>
        <div class="col-sm-4 ">
            <div class="position-relative p-3 bg-white" style="height: 200px">
                <blockquote><strong>联系我们</strong></blockquote>
                <small style="line-height:30px">CONCAT US</small>
                <h5 class="text-muted"><strong style="font-size: 17px">联系电话：</strong>${business.tel}</h5>
                <h5 class="text-muted"><strong style="font-size: 17px">联系地址：</strong>${business.address}</h5>
            </div>
        </div>
    </div>

</div>

<!-- Modal -->


<div class="modal fade" id="appointmentModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog " style="max-width: 380px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">请输入预约信息</h4>
            </div>
            <form id="appointmentForm" method="post" action="/appointment/save">
                <div class="modal-body">
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-user"></i> </span>
                        <input class="form-control" placeholder="请输入您的姓名" name="contact_name">
                    </div>
                    <br/>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-phone"></i></span>
                        <input class="form-control" placeholder="请输入您的电话" name="contact_tel">
                    </div>
                    <br/>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-home"></i></span>
                        <select class="form-control" placeholder="请选择预约门店" name="business.id">
                            <option value="">请选择预约门店</option>
                            <#list businesses as b>
                              <option value="${b.id}">${b.name}</option>
                            </#list>
                        </select>
                    </div>
                    <br/>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-tag"></i></span>
                        <select class="form-control" id="controlSelect" placeholder="请选择预约业务" name="category.id">
                            <option value="">请选择预约业务</option>
                        </select>
                    </div>
                    <br/>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input class="form-control input-date-noss" placeholder="请选择预约时间" name="appointment_time">
                    </div>
                    <br/>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-bookmark"></i></span>
                        <textarea class="form-control" placeholder="备注说明" name="info"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary-full">确定预约</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>

    $.get('/systemDictionaryItem/selectByTypeSn', {sn: 'business'}, function (data) {
        var str1 = '';
        var str2 = '';
        $.each(data, function (id, ele) {
            str1 += '<button class="btn btn-primary-cus">' + ele.title + '</button>'
            str2 += '<option value="' + ele.id + '">' + ele.title + '</option>'
        });
        $('.category').append(str1);
        $('#controlSelect').append(str2);

    });

    $('#btn-appointment').click(function () {
        $('#appointmentForm').ajaxForm(function (data) {
            if (data.success) {
                //弹框表示加载成功,当用户点击确定,重新刷新页面
                Swal.fire({
                    text: "操作成功",
                    icon: 'success',
                    confirmButtonText: 'ok',
                }).then((result) => {
                    if (result.value) {
                        window.location.reload();
                    }
                })
                //如果加载失败
            } else {
                Swal.fire(
                    data.msg,
                    '',
                    'error',
                )
            }
        })
        $('#appointmentModal').modal('show')
    })

</script>

</body>
</html>
